.dialog {
    position: relative;
    width: 640px;
    margin: 10% auto;

    &-wrap {
        position: fixed;
        z-index: 1050;
        inset: 0;

        overflow: hidden;
        outline: 0;

        -webkit-overflow-scrolling: touch;
    }

    &-title {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: 500;

        &-content {
            padding: 24px 28px 20px;
            box-sizing: border-box;
        }
    }

    &-content {
        pointer-events: all;

        position: relative;

        color: rgb(var(--text-color));

        background-color: rgb(var(--bg-color-secondary));
        background-clip: padding-box;
        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-lg);
        box-shadow: var(--box-shadow-base);
    }

    &-close {
        cursor: pointer;

        position: absolute;
        top: 24px;
        right: 28px;

        padding: 0;

        font-size: var(--font-size-lg);
        font-weight: 500;
        line-height: 1;
        color: rgb(var(--grey-500));
        text-decoration: none;

        opacity: 0.2;
        background: transparent;
        border: 0;

        &:hover {
            text-decoration: none;
            opacity: 1;
        }
    }

    &-header {
        box-sizing: border-box;
        color: rgb(var(--text-color));
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }

    &-body {
        padding: 0 28px 20px;
    }

    &-footer {
        padding: 0 28px 24px;
        text-align: right;
        border-radius: 0 0 5px 5px;
    }

    .effect() {
        animation-duration: 0.3s;
        animation-fill-mode: both;
    }

    &-zoom-enter,
    &-zoom-appear {
        opacity: 0;
        animation-play-state: paused;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
        .effect();
    }

    &-zoom-leave {
        .effect();

        animation-play-state: paused;
        animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    &-zoom-enter&-zoom-enter-active,
    &-zoom-appear&-zoom-appear-active {
        animation-name: dialog-zoom-in;
        animation-play-state: running;
    }

    &-zoom-leave&-zoom-leave-active {
        animation-name: dialog-zoom-out;
        animation-play-state: running;
    }

    @keyframes dialog-zoom-in {
        0% {
            transform: scale(0, 0);
            opacity: 0;
        }

        100% {
            transform: scale(1, 1);
            opacity: 1;
        }
    }

    @keyframes dialog-zoom-out {
        0% {
            transform: scale(1, 1);
        }

        100% {
            transform: scale(0, 0);
            opacity: 0;
        }
    }

    &-mask {
        position: fixed;
        z-index: 1050;
        inset: 0;

        height: 100%;

        background-color: rgb(0 0 0 / 50%);

        &-hidden {
            display: none;
        }
    }

    .fade-effect() {
        animation-duration: 0.3s;
        animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
        animation-fill-mode: both;
    }

    &-fade-enter,
    &-fade-appear {
        opacity: 0;
        .fade-effect();

        animation-play-state: paused;
    }

    &-fade-leave {
        .fade-effect();

        animation-play-state: paused;
    }

    &-fade-enter&-fade-enter-active,
    &-fade-appear&-fade-appear-active {
        animation-name: dialog-fade-in;
        animation-play-state: running;
    }

    &-fade-leave&-fade-leave-active {
        animation-name: dialog-fade-out;
        animation-play-state: running;
    }

    @keyframes dialog-fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes dialog-fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    &-root-draggable {
        pointer-events: none;
    }
}
